<template>
  <el-dialog
    v-model="visible"
    width="50%"
    :draggable="true"
  >
    <el-form :model="localFormData" label-width="100px" class="form">
      <el-form-item label="所属家庭">
        <el-select
          size="default"
          v-model="localFormData.familyId"
          placeholder="请选择家庭"
        >
          <el-option v-for="f in familyList"
                     :key="f.id"
                     :label="f.name"
                     :value="f.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="localFormData.date"
          type="date"
          placeholder="请选择业务日期"
          size="default"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />

      </el-form-item>
      <el-form-item label="收支内容">
        <el-input v-model="localFormData.content"/>
      </el-form-item>

      <el-form-item label="金额">
        <el-input-number
          v-model.number="localFormData.amount"
          :precision="2"
          :value-on-clear="null"

        />
      </el-form-item>
      <el-form-item label="标签">
        <el-select
          placeholder="请选择标签"
          v-model="localFormData.tagId"
        >
          <el-option v-for="tag in tagList"
                     :key="tag.id"
                     :label="tag.name"
                     :value="tag.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="收支类型">

        <el-radio-group fill="#3370ff"
                        v-model="localFormData.incomeExpenseType">
          <el-radio-button v-for="type in incomeExpenseTypes"
                           :key="type.code"
                           :value="type.code">{{ type.desc }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="来源类型">
        <el-select
          placeholder="请选择来源类型"
          v-model="localFormData.sourceType"
        >
          <el-option v-for="type in sourceTypes" :key="type.code" :label="type.desc"
                     :value="type.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          show-word-limit
          maxlength="150"
          :rows="4"
          placeholder="请输入备注"
          v-model="localFormData.remark"
        >

        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button color="#3370ff" @click="saveEdit">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, ref, watch} from 'vue';
import type {Detail, Family, Dictionary, Tag} from "@/api/detail/type.ts";
import {saveDetail} from "@/api/detail";
import {ElMessage} from "element-plus";

import {useTokenStore} from "@/stores/useTokenStore.ts";


const props = defineProps<{
  visible: boolean;
  formData: Detail;
  familyList: Family[];
  sourceTypes: Dictionary[];
  incomeExpenseTypes: Dictionary[];
  tagList: Tag[]
}>();

const localFormData = ref<Detail>({
  ...props.formData,
});

// 监听 formData 变化
watch(() => props.formData, (newVal) => {
  localFormData.value = {...newVal};
}, {deep: true});

const emit = defineEmits(['update:visible', 'refresh']);

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

/**
 * 保存编辑
 */
async function saveEdit() {
  //新建明细
  if (!localFormData.value.id) {
    supplement();
    console.log(localFormData.value)
  }

  try {
    const res = await saveDetail(localFormData.value);
    if (res.code === 'M000') {
      ElMessage.success("修改成功");
      visible.value = false;
      emit('refresh');
    }

  } catch (e) {
    console.error('修改失败', e);
    ElMessage.error("修改失败")
  }
}


/**
 * 新建明细补充信息
 */
function supplement() {
  //处理家庭名称
  const family = props.familyList.find(f => f.id === localFormData.value.familyId);
  if (!family) {
    throw new Error('新建明细---->家庭查找失败');
  }


  localFormData.value.familyName = family.name;

  //处理标签名称
  const tag = props.tagList.find(t => t.id === localFormData.value.tagId);
  if (!tag) {
    throw new Error('新建明细---->标签查找失败');
  }
  localFormData.value.tagName = tag.name;
  //处理成员名称
  const tokenStore = useTokenStore();
  localFormData.value.memberId = tokenStore.userId;
  localFormData.value.memberName = tokenStore.name;
}
</script>

<style scoped>
/* 新建与编辑确认按钮 */
:deep(.el-dialog__footer .el-button--primary) {
  font-size: 14px;
  width: 80px;
  height: 30px;
  background-color: #3370ff;
}

.form {
  padding-right: 50px;
  box-sizing: border-box;
}
</style>
